import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Theme, Avatar, type UserMenuItem, PersonIcon, SettingsIcon, HelpIcon, LogoutIcon } from '@repo/ui';
import { useUserState, useUserActions } from '../../stores';
import styles from './SidebarHeader.module.css';

interface SidebarHeaderProps {
  className?: string;
}

const SidebarHeader: React.FC<SidebarHeaderProps> = ({ className }) => {
  const { isLoggedIn, userInfo } = useUserState();
  const { logout } = useUserActions();
  const navigate = useNavigate();

  // 用户菜单数据
  const userMenuItems: UserMenuItem[] = [
    {
      label: '个人资料',
      icon: <PersonIcon size={16} />,
      onClick: () => {
        navigate('/profile');
      }
    },
    {
      label: '设置',
      icon: <SettingsIcon size={16} />,
      onClick: () => {
        navigate('/settings');
      }
    },
    {
      label: '帮助',
      icon: <HelpIcon size={16} />,
      onClick: () => {
        // TODO: 实现帮助页面跳转
        console.log('帮助');
      },
      divider: true
    },
    {
      label: '退出登录',
      icon: <LogoutIcon size={16} />,
      onClick: logout,
      type: 'danger'
    }
  ];

  return (
    <div className={`${styles.container} ${className || ''}`}>
      {/* 左侧：用户Avatar + 项目信息 */}
      <div className={styles.leftSection}>
        {isLoggedIn && userInfo && (
          <Avatar
            userName={userInfo.username}
            userEmail={userInfo.email}
            avatarUrl={userInfo.avatar || undefined}
            menuItems={userMenuItems}
            size="lg"
            dropdownPlacement="bottom-start"
            dropdownSize="sm"
            showUserInfo={false}
            className={styles.userAvatar}
          />
        )}
        <div className={styles.logo}>
          <div className={styles.logoText}>
            <span className={styles.brand}>ESP32</span>
            <span className={styles.subtitle}>Launchpad</span>
          </div>
        </div>
      </div>
      
      {/* 右侧：主题切换 */}
      <div className={styles.themeToggle}>
        <Theme size="sm" />
      </div>
    </div>
  );
};

export default SidebarHeader;
